<template>
      <div style="width: 80%">
            <div style="margin-bottom: 5px;margin-top: 5px;text-align: center">
                  <el-input v-model="name" placeholder="请输入姓名" style="width: 200px" suffix-icon="Search"
                            @keyup.enter.native="loadPost"
                  ></el-input>
                  <el-select
                            v-model="classify"
                            placeholder="请选择执业类型"
                            style="width: 200px"
                  >
                        <el-option
                                  v-for="item in classifies"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                        />
                  </el-select>
                  <el-button style="margin-left: 5px" type="primary" @click="loadPost">查询</el-button>
                  <el-button type="danger" @click="resetParam">重置</el-button>
                  <el-button type="success" @click="add">新增</el-button>
            </div>
            <el-scrollbar>
                  <el-table :data="tableData">
                        <!--                        <el-table-column label="ID" prop="id" width="140"/>-->
                        <!--                        <el-table-column label="用户名" prop="no" width="120"/>-->
                        <el-table-column label="姓名" prop="name"/>
                        <el-table-column label="身份证号" prop="card"/>
                        <el-table-column label="执业类型" prop="classify">
                              <template v-slot="scope">
                                    <el-tag
                                              :type="scope.row.classify=== '0' ? 'primary' :(scope.row.classify=== '1' ? 'success': 'danger' )"
                                              disable-transitions
                                    >{{ scope.row.classify=== '0' ? '民事案件' :(scope.row.classify=== '1' ? '刑事案件': '行政案件' ) }}
                                    </el-tag
                                    >
                              </template>
                        </el-table-column>
                        <el-table-column label="证书编号" prop="crenum"/>

                        <!--      <el-table-column />-->
<!--                        <el-table-column label="权限" prop="role_id">-->
<!--                              <template v-slot="scope">-->
<!--                                    <el-tag-->
<!--                                              :type="scope.row.flag=== 0 ? 'danger' :(scope.row.flag=== 1 ? 'success' : 'primary')"-->
<!--                                              disable-transitions-->
<!--                                    >{{ scope.row.flag === 0 ? '管理员' : (scope.row.flag === 1 ? '用户' : '律师') }}-->
<!--                                    </el-tag-->
<!--                                    >-->
<!--                              </template>-->
<!--                        </el-table-column>-->
                        <el-table-column label="操作" prop="operate">
                              <template v-slot="scope">
                                    <el-button size="small" type="success" @click="modify(scope.row)">详情</el-button>
<!--                                    <el-popconfirm  title="Delete this?"  @confirm="del(scope.row.id)">-->
<!--                                          <template #reference>-->
<!--                                                <el-button   size="small" type="danger">删除</el-button>-->
<!--                                          </template>-->
<!--                                    </el-popconfirm>-->
                              </template>
                        </el-table-column>
                  </el-table>
            </el-scrollbar>

            <el-pagination v-model:current-page="pageNum"
                           v-model:page-size="pageSize"
                           :page-sizes="[2, 5, 10,20]"
                           :total="total"

                           layout="total, sizes, prev, pager, next, jumper"
                           style="position: relative  ;bottom: 10%;left: 350px"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
            />

            <!--    :small="small"-->
            <!--    :disabled="disabled"-->
            <!--    :background="background"-->

            <el-dialog
                      v-model="dialogVisible"
                      :before-close="handleClose"
                      title="Tips"
                      width="300"
            >
                  <el-form :model="form" label-width="auto" style="max-width: 600px"  :rules="rules" ref="form">
                        <!--                        <el-form-item label="账号" prop="account">-->
                        <!--                              <el-col :span="22">-->
                        <!--                                    <el-input v-model="form.account"/>-->
                        <!--                              </el-col>-->
                        <!--                        </el-form-item>-->
                        <el-form-item label="姓名" prop="name">
                              <el-col :span="22">
                                    <el-input v-model="form.name"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                              <el-col :span="22">
                                    <el-input v-model="form.password"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="card">
                              <el-col :span="22">
                                    <el-input v-model="form.card"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="电话" prop="num">
                              <el-col :span="22">
                                    <el-input v-model="form.num"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="flag" style="display: none" prop="flag">
                              <el-col :span="22">
                                    <el-input value="2" v-model="form.flag" />
                              </el-col>
                        </el-form-item>
                  </el-form>
                  <template #footer>
                        <div class="dialog-footer">
                              <el-button @click="dialogVisible = false">Cancel</el-button>
                              <el-button type="primary" @click="save">Confirm</el-button>
                        </div>
                  </template>
            </el-dialog>
      </div>
</template>

<script>

export default {
      name: "adminManager",
      data() {
            let checkDuplicate=(rule,value,callback)=>{
                  if (this.form.id){
                        return callback()
                  }
                  this.$axios.get('http://localhost:8088/user/findByNo?no='+this.form.no).then(res=>res.data).then(res=>{
                        if (res.code!==200){
                              callback()
                        }else {
                              callback(new Error('账号已存在'));
                        }
                  })
            }
            return {
                  tableData: [],
                  pageSize: 5,
                  pageNum: 1,
                  total: 0,
                  name: '',
                  calssify: '',
                  classifies: [
                        {
                              value: '0',
                              label: '民事案件',
                        },
                        {
                              value: '1',
                              label: '刑事案件',
                        },
                        {
                              value: '2',
                              label: '行政案件',
                        }

                  ],
                  dialogVisible: false,
                  form: {
                        id:'',
                        name:'',
                        password: '',
                        card:'',
                        classify:'',
                        credential:'',
                        state:'',
                        num:'',
                        crenum:'',
                        img:''
                  },
                  // rules:{
                  //       account: [
                  //             { required: true, message: 'Please input Activity Number', trigger: 'blur' },
                  //             { min: 6, max: 6, message: 'Length should be 6', trigger: 'blur' },
                  //             { validator:checkDuplicate,trigger:'blur'}],
                  //       name: [
                  //             { required: true, message: 'Please input Activity name', trigger: 'blur' },
                  //             { min: 3, max: 8, message: 'Length should be 3 to 8', trigger: 'blur' }],
                  //       password: [
                  //             { required: true, message: 'Please input Activity Password', trigger: 'blur' },
                  //             { min: 3, max: 8, message: 'Length should be 3 to 8', trigger: 'blur' }],
                  //       age: [
                  //             { required: true, message: 'Please input Activity age', trigger: 'blur' },
                  //             { min: 1, max: 2, message: 'Age should be 0 to 100', trigger: 'blur' },
                  //             // { validator:checkAge(),trigger:'blur'}
                  //       ],
                  //       phone: [
                  //             { required: true, message: 'Please input Activity Phone', trigger: 'blur' },
                  //             {pattern:/^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: 'Please input Right Phone', trigger: 'blur' }],
                  // }
            };
      },
      methods: {
            loadGet() {
                  this.$axios('http://localhost:8088/lawyer/list/').then(res => res.data).then(res => {
                        console.log(res)
                  })
            },
            modify(row){
                  console.log(row)
                  //      赋值到表单
                  this.dialogVisible=true
                  this.$nextTick(()=>{
                        this.form=row
                        this.form.sex=row.sex+''
                        this.form.age=row.age+''
                  })
            },
            del(id){
                  console.log(id)
                  this.$axios.get('http://localhost:8088/lawyer/del?id='+id).then(res => res.data).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                              this.$message({
                                    message: 'Congrats, this is a success message.',
                                    type: 'success',
                              })
                              this.loadPost()
                        } else {
                              this.$message({
                                    message: 'Regret, this is a error message.',
                                    type: 'danger',
                              })

                        }
                  })
            },
            loadPost() {
                  this.$axios.post('http://localhost:8088/lawyer/listPageResult', {
                        pageSize: this.pageSize,
                        pageNum: this.pageNum,
                        param: {
                              name: this.name,
                              sex: this.sex
                        }

                  }).then(res => res.data).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                              // alert("是200")
                              this.tableData = res.data
                              this.total = res.total
                              console.log(res.total)
                        } else {
                              alert("不是200")
                        }
                  })
            },
            handleSizeChange(val) {
                  console.log(`${val} items per page`)
                  this.pageNum = 1
                  this.pageSize = val
                  this.loadPost()
            },
            handleCurrentChange(val) {
                  console.log(`current page: ${val}`)
                  this.pageNum = val
                  this.loadPost()
            },
            resetParam() {
                  this.name = ''
                  this.sex = ''
            },
            add() {
                  this.dialogVisible = true
                  this.$nextTick(()=>{
                        this.resetForm()
                  })
            },
            doSave(){
                  this.$axios.post('http://localhost:8088/lawyer/save', this.form).then(res => res.data).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                              // alert("是200")
                              // this.tableData = res.data
                              // this.total = res.total
                              // console.log(res.total)

                              this.$message({
                                    message: 'Congrats, this is a success message.',
                                    type: 'success',
                              })
                              this.dialogVisible = false
                              this.loadPost()
                        } else {
                              // alert("不是200")
                              this.$message({
                                    message: 'Regret, this is a error message.',
                                    type: 'danger',
                              })

                        }
                  })
            },
            doMod(){
                  this.$axios.post('http://localhost:8088/lawyer/update', this.form).then(res => res.data).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                              // alert("是200")
                              // this.tableData = res.data
                              // this.total = res.total
                              // console.log(res.total)

                              this.$message({
                                    message: 'Congrats, this is a success message.',
                                    type: 'success',
                              })
                              this.dialogVisible = false
                              this.loadPost()
                        } else {
                              // alert("不是200")
                              this.$message({
                                    message: 'Regret, this is a error message.',
                                    type: 'danger',
                              })

                        }
                  })
            },
            save(){
                  this.$refs.form.validate((valid) => {
                        if (valid){
                              if (this.form.id){
                                    this.doMod();
                              }else {
                                    this.doSave();
                              }

                        }else {
                              alert("填写错误，重新提交")
                              return false
                        }
                  })

            },
            resetForm(){
                  this.$refs.form.resetFields();
            }


      },
      mounted() {
            // this.loadGet();
            this.loadPost();
      }
}


</script>

<style scoped>

</style>